<script setup lang="ts">
import {useUserStore} from "@/pinia/stores/user.ts";
import {projectPage} from "@/pages/project/projectManagement/index.js";
import {getFundingList} from "@/pages/funding/index.js";
import { getVisitViewsUsersCount} from "@/pages/index";
const userData = useUserStore().userInfo;
// 定义一个计算属性来获取问候语
const dateContent = computed(() => {
  const hour = new Date().getHours();
  if (hour < 12) {
    return '早上好';
  } else if (hour < 13) {
    return '中午好';
  }else if (hour < 18) {
    return '下午好';
  } else if (hour < 22) {
    return '晚上好';
  } else {
    return '夜深了，注意休息';
  }
});
const projectCount = ref(0)
const tableApplication = ref(0)
const visitCount = ref(0)
const viewsUsersCount = ref(0)
const projectIds = ref([])
const projiectData = async () => {
  let response = await projectPage({teacherId: userData.id}, 9999, 1);
  projectCount.value = response.data.total;
  projectIds.value = response.data.records.map(item => item.id)
  // 获取项目申请数
  if (projectIds.value.length > 0){
    getVisitViewsUsersCountData();
  }
}
const projiectApplication = async () => {
  let data = await getFundingList({reviewerId: userData.id}).then(data=>{
    tableApplication.value = data.data.total;
  })
}

const getVisitViewsUsersCountData =async () => {
  await getVisitViewsUsersCount(projectIds.value).then(data=>{
    visitCount.value = data.data.visitCount;
    viewsUsersCount.value = data.data.viewsUsersCount;
  })
}

onMounted(() => {
  projiectData();
  projiectApplication();
})


</script>

<template>
  <el-card shadow="never">
    <div style="display: flex;justify-content: space-between; align-items: center; gap: 20px;">
      <div style="display: flex;align-items: center;">
        <el-avatar :size="66" :src="userData.headUrl"></el-avatar>
        <div class="userInfo">
          <div>
            <span>{{dateContent}}，</span>
            <span>{{userData.username}}，要不要放松一下</span>
          </div>
          <div class="sfen">
            <span style="margin-right: 8px">今天是{{new Date().toLocaleDateString()}}</span>
            <span style="border-left: 1px solid #ccc; padding-left: 7px;">教师</span>
          </div>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <div class="right-div">
          <el-button text size="small" icon="el-icon-edit">项目数</el-button>
          <div style="margin-top: 5px;">{{projectCount}}</div>
        </div>
        <div class="right-div">
          <el-button text size="small" icon="el-icon-setting">申请数</el-button>
          <div style="margin-top: 5px;">{{tableApplication}}</div>
        </div>
        <div class="right-div">
         <el-button text size="small" icon="el-icon-setting">项目访问</el-button>
          <div style="margin-top: 5px;">{{visitCount}}</div>
        </div>
        <div class="right-div" style="border-right: none">
         <el-button text size="small" icon="el-icon-setting">项目浏览</el-button>
          <div style="margin-top: 5px;">{{viewsUsersCount}}</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.userInfo {
  margin-left: 20px;
  margin-top: 8px;
}
.sfen{
  margin-top: 10px;
  color: #0fc6c2;
  font-size: 13px;
 }
.right-div{
  border-right: 1px solid #ccc;
  padding-right: 10px;
  text-align: right;
}
.right-div div{
  margin-right: 10px;
}
.el-button:hover {
  background: none !important; // 移除背景颜色
  border-color: initial !important; // 移除边框颜色
  box-shadow: none !important; // 移除阴影效果
}
</style>
